<template>
  <div>
    <div class="head">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div class="topCardView">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>本周实时情况</span>
          </div>
          <div>
            <div id="myChart" class="myChart"></div>
          </div>
        </el-card>
        <div class="rightCardView">
          <div class="rightCardViewTop">
          <el-card class="right-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>用户在线情况</span>
            </div>
            <div>
              <!-- category -->
              <div id="myChartCategory"></div>
            </div>
          </el-card>
          <el-card class="right-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>软件打开数量</span>
            </div>
            <div>
              <!-- category -->
              <div id="myChartCategoryRight"></div>
            </div>
          </el-card>
          </div>
          <el-card class="right-card-down" shadow="hover">
            <div slot="header" class="clearfix">
              <span>基础画像</span>
            </div>
            <div>
              <div id="myChartScatter"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'), null, {
          width: 600,
          height: 400
        })
        let myChartCategory=this.$echarts.init(document.getElementById('myChartCategory'), null, {
          width: 210,
          height: 210
        })
        let myChartCategoryRight=this.$echarts.init(document.getElementById('myChartCategoryRight'), null, {
          width: 210,
          height: 210
        })
        let myChartScatter=this.$echarts.init(document.getElementById('myChartScatter'), null, {
          width: 585,
          height: 100
        })
        // 绘制图表
        myChart.setOption({
            tooltip: {
              confine:{
                default:true
              },
            },
            // legend: {
            //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            // },
            grid: {
              left: '0%',
              right: '3%',
              bottom: '0%',
              top:'2%',
              containLabel: true,
            },
            xAxis: {
                type: 'category',
                axisLabel:{  
                         interval:0,//横轴信息全部显示  
                    },  
                boundaryGap: false,
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
            },
            yAxis: {
                type: 'value'
              },
            series: [
                  {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210],
                  },
                  {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                  },
                  {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                  },
                  {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                  },
                  {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                  }
            ] 
        });
        myChartCategory.setOption({
          grid: {
              left: '0%',
              right: '3%',
              bottom: '0%',
              top:'1%',
              containLabel: true,
          },
          polar: {
            radius: [30, '80%']
          },
          radiusAxis: {
            max: 4
          },
          angleAxis: {
            type: 'category',
            data: ['a', 'b', 'c', 'd'],
            startAngle: 75
          },
          tooltip: {},
          series: {
            type: 'bar',
            data: [2, 1.2, 2.4, 3.6],
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              formatter: '{b}: {c}'
            }
          }
        });
        myChartCategoryRight.setOption({
          grid: {
              left: '0%',
              right: '3%',
              bottom: '0%',
              top:'1%',
              containLabel: true,
          },
          polar: {
            radius: [30, '80%']
          },
          radiusAxis: {
            max: 4
          },
          angleAxis: {
            type: 'category',
            data: ['a', 'b', 'c', 'd'],
            startAngle: 75
          },
          tooltip: {},
          series: {
            type: 'bar',
            data: [2, 4, 2, 3],
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              formatter: '{b}: {c}'
            }
          }
        });
        myChartScatter.setOption({
          grid: {
              left: '0%',
              right: '3%',
              bottom: '0%',
              top:'6%',
              containLabel: true,
          },
          xAxis: {},
          yAxis: {},
          series: [
            {
              symbolSize: 20,
              data: [
                [10.0, 8.04],
                [8.07, 6.95],
                [13.0, 7.58],
                [9.05, 8.81],
                [11.0, 8.33],
                [14.0, 7.66],
                [13.4, 6.81],
                [10.0, 6.33],
                [14.0, 8.96],
                [12.5, 6.82],
                [9.15, 7.2],
                [11.5, 7.2],
                [3.03, 4.23],
                [12.2, 7.83],
                [2.02, 4.47],
                [1.05, 3.33],
                [4.05, 4.96],
                [6.03, 7.24],
                [12.0, 6.26],
                [12.0, 8.84],
                [7.08, 5.82],
                [5.02, 5.68]
              ],
              type: 'scatter'
            }
          ]
        });
    }
  }
}
</script>

<style scoped>
/* *{
  overflow-y: hidden;
  overflow-x: hidden;
} */
.right-card{
  overflow-y: hidden;
  overflow-x: hidden;
}
  .topCardView{
    width: 100%;
    height: 100%;
    display: flex;
  }
.content {
  display: flex;
  flex-direction: column;
} 

.box-card {
  width: 637px;
  min-width: 637px;
  justify-content: center;
  align-items: center;  
  border-radius: 20px;
}

.right-card,.right-card-down{
  margin-left: 2vw;
  justify-content: center;
  align-items: center;  
  border-radius: 20px;
}

.right-card{
  width: 270px;
  height: 280px;
}

.right-card-down{
  margin-top: 5vh;
}


.clearfix{
  display: flex;
  font-weight: 600;
}


.myChart{
  width: 100%;
}

.rightCardView{
  width: 49%;
  padding-right: 2vw;
  display: flex;
  flex-direction: column;
}

.rightCardViewTop{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>